// 千分位分隔符指令
import { Directive } from 'vue'

export const toNumber = (val) => {
    val = val.toString().replace(/[^\d^\.^\-]+/g, "") // 第二步：把不是数字，不是小数点、-的过滤掉
        .replace(/^0+(\d)/, "$1") // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
        .replace(/^\./, "0.") // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
        .replace(".", "$#$").replace(/\./g, "").replace("$#$", ".") // 只保留第一个".", 清除多余的"."
    // .match(/^\d*(\.?\d{0,9})/g)[0] || ""; // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有1到9位小数
    return val
}

const thousands: Directive = {
  mounted(el) {
    // 获取input节点
    if (el.tagName.toLocaleUpperCase() !== 'INPUT') {
   
      el = el.getElementsByTagName('input')[0]
    }
    // 千分位
    el.value = parseFloat(el.value || 0).toLocaleString('zh', {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2
    })
    // 聚焦转化为数字格式（去除千分位）
    el.onfocus = e => {
      el.value = toNumber(el.value) ? toNumber(el.value) : 0
      const a = el.value.replace(/,/g, '') //去除千分号的','
      el.value = parseFloat(a).toFixed(2)
    }
    el.onblur = e => {
      el.value = toNumber(el.value) ? toNumber(el.value) : 0
      el.value = parseFloat(el.value).toLocaleString('zh', {
 
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      })
    }
  },
}


export default {
  thousands,
}
